<script setup lang="ts">
import { router } from '@/router';
import { info } from '@tauri-apps/plugin-log';
import { PopoverAction, showToast } from 'vant';
import { ref } from 'vue';

const popover = ref({
    showPopover: false,
    actions: [
        { text: '发起群聊', icon: 'chat' },
        { text: '添加好友', icon: 'friends' },
        { text: '扫一扫', icon: 'photograph' },
    ],
})
const onSelect = (action: PopoverAction, index: number) => {
    showToast(action.text);
    if (index === 0) {
        router.push("/add/friend");
    } else {

    }
};

const toSearch = () => {
    try {
        router.push("/message/search");
    } catch (e) {
        info(JSON.stringify(e));
    }
}

</script>

<template>
    <div class="container">
        <div class="center">
            <p class="text">聊天</p>
        </div>
        <div class="right">
            <div class="search" @click="toSearch">
                <van-icon name="search" size="32"/>
            </div>
            <div class="popover">
                <van-popover  v-model:show="popover.showPopover" theme="dark"
                    placement="bottom-end" style="display: flex;" :overlay="true"
                    :actions="popover.actions" @select="onSelect">
                    <template #reference>
                        <van-icon name="add-o" size="32"/>
                    </template>
                </van-popover>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    display: flex;
    background-color: white;
    flex-direction: row;
    height: 50px;
    width: 100%;
    justify-content: center;
    .center {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        width: 100%;
        height: 6%;
        .text {
            margin: 0%;
            font-size: 20px;
        }
    }
    .right {
        display: flex;
        flex-grow: 1;
        justify-content: right;
        .search {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-right: 3%;
        }
        .popover {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-right: 3%;
        }
    }
}
</style>